<!--
 * @Author: your name
 * @Date: 2021-03-28 14:44:23
 * @LastEditTime: 2021-04-05 21:26:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-template-master\src\views\product\Sku\SkuList.vue
-->

<template>
  <div class="sku-list">
    <el-table :data="skuList"
              border
              style="width: 100%">
      <el-table-column prop="prop"
                       align="center"
                       type="index"
                       label="序号"
                       width="80">
      </el-table-column>
      <el-table-column prop="skuName"
                       label="名称"
                       width="width">
      </el-table-column>
      <el-table-column prop="skuDesc"
                       label="描述"
                       width="width">
      </el-table-column>
      <el-table-column prop="prop"
                       label="默认图片"
                       width="150">
        <template slot-scope="{row,$index}">
          <img :src="row.skuDefaultImg"
               alt=""
               style="width:100px;height:80px">
        </template>
      </el-table-column>
      <el-table-column prop="weight"
                       label="重量(千克)"
                       width="width">
      </el-table-column>
      <el-table-column prop="price"
                       label="价格(元)"
                       width="100">
      </el-table-column>
      <el-table-column prop="prop"
                       label="操作"
                       width="width">
        <template slot-scope="{row,$index}">
          <HintButton type="info"
                      title="上架"
                      size="mini"
                      icon="el-icon-top"
                      v-if="row.isSale === 0"
                      @click="UpdateSale(row,skuList)"></HintButton>
          <HintButton type="success"
                      title="下架"
                      size="mini"
                      @click="soldOut(row)"
                      icon="el-icon-bottom"
                      v-else></HintButton>
          <HintButton type="primary"
                      title="修改"
                      size="mini"
                      icon="el-icon-edit"
                      @click="modification"></HintButton>
          <HintButton type="info"
                      title="查看详情"
                      size="mini"
                      icon="el-icon-info"
                      @click="getDetail(row)"></HintButton>
          <HintButton type="warning"
                      title="删除"
                      size="mini"
                      icon="el-icon-delete"
                      @click="deleteSku(row)"></HintButton>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   style="text-align:center"
                   @current-change="getSkuList"
                   :current-page="page"
                   :page-sizes="[10, 20, 50]"
                   :page-size="limit"
                   layout=" prev, pager, next, jumper,->,sizes,total"
                   :total="total">
    </el-pagination>
    <!-- :before-close="handleClose" -->
    <el-drawer :visible.sync="isShowSku"
               :with-header="false"
               size="50%">
      <el-row>
        <el-col :span="5">名称</el-col>
        <el-col :span="16">{{detail.skuName}}</el-col>
      </el-row>

      <el-row>
        <el-col :span="5">描述</el-col>
        <el-col :span="16">{{detail.skuDesc}}</el-col>
      </el-row>

      <el-row>
        <el-col :span="5">价格</el-col>
        <el-col :span="16">{{detail.price}}</el-col>
      </el-row>

      <el-row>
        <el-col :span="5">平台属性</el-col>
        <el-col :span="16">
          <el-tag type="success"
                  v-for="skuAttr in detail.skuAttrValueList"
                  style="margin-right: 5px"
                  :key="skuAttr.id">
            {{skuAttr.valueName}}
          </el-tag>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">商品图片</el-col>
        <el-col :span="16">
          <el-carousel height="400px"
                       class="sku-carousel">
            <el-carousel-item v-for="image in detail.skuImageList"
                              :key="image.id">
              <img :src="image.imgUrl"
                   alt="">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'SkuList',
  data () {
    return {
      skuList: [],
      page: 1,
      limit: 10,
      total: 0,
      isShowSku: false,
      detail: {}
    }
  },
  mounted () {
    this.getSkuList()
  },
  methods: {
    async getSkuList (pager = 1) {
      this.page = pager
      const result = await this.$API.sku.getList(this.page, this.limit)
      this.skuList = result.data.records
      this.total = result.data.total
    },
    handleSizeChange (size) {
      this.limit = size
      this.getSkuList(this.page)
    },
    //上架
    async UpdateSale (row) {
      await this.$API.sku.onSale(row.id)
      this.$message.success('上架成功')
      this.getSkuList(this.page)
    },
    //下架
    async soldOut (row) {
      await this.$API.sku.cancelSale(row.id)
      this.$message.success('下架成功')
      this.getSkuList(this.page)
    },
    //修改
    modification () {
      this.$message.info('正在开发中')
    },
    //删除
    async deleteSku (row) {
      await this.$API.sku.remove(row.id)
      this.$message.success('删除成功')
      this.getSkuList(this.page)
    },
    //查看详情
    async getDetail (row) {
      this.isShowSku = true
      const result = await this.$API.sku.get(row.id)
      this.detail = result.data
    }
  },


}
</script>

<style lang="scss" scoped>
.sku-list {
  .el-row {
    height: 40px;
    .el-col {
      line-height: 40px;
      &.el-col-5 {
        font-size: 18px;
        font-weight: bold;
        text-align: right;
        margin-right: 20px;
      }
    }
  }

  .sku-carousel {
    width: 400px;
    border: 1px solid #ccc;
    img {
      width: 400px;
      height: 400px;
    }
  }

  ::v-deep .el-carousel__indicator {
    button {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: hotpink;
    }
    &.is-active {
      button {
        background-color: purple;
      }
    }
  }
}
</style>

